﻿@model CNRegex.Entity.RegexUser
@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/css/AccountRegister.css")" type="text/css" />
<script type="text/javascript">
	var nameRegex = /^[A-Za-z0-9_@@.]{5,16}$/;
	var passwordRegex = /^.{6,16}$/;
	var emailRegex = /^.+@@.+$/;

	function loginValid() {
		var loginName = jQuery.trim($("#loginName").val());
		var loginPassword = jQuery.trim($("#loginPassword").val());
		var isValid = true;
		if (loginName == "") {
			isValid = false;
			$("#spanErrorLoginName").css("display", "inline");
		}
		if (loginPassword == "") {
			isValid = false;
			$("#spanErrorLoginPassword").css("display", "inline");
		}
		return isValid;
	}

	function registerValidation() {
		var isValid = true;
		var name = jQuery.trim($("#Name").val());
		var password = $("#Password").val();
		var retypePassword = $("#txtPasswordConfirm").val();
		var email = $("#Email").val();
		if (!nameRegex.test(name)) {
			$("#spanErrorName").fadeOut().fadeIn().css("color", "red");
			isValid = false;
		}
		else {
			$("#spanErrorName").css("color", "#696969");
		}
		if (!passwordRegex.test(password)) {
			$("#spanErrorPassword").fadeOut().fadeIn().css("color", "red");
			isValid = false;
		}
		else {
			$("#spanErrorPassword").css("color", "#696969");
		}
		if (password != retypePassword) {
			$("#spanErrorPasswordRetype").fadeOut().fadeIn().css("color", "red");
			isValid = false;
		}
		else {
			$("#spanErrorPasswordRetype").css("display", "none");
		}
		if (!emailRegex.test(email)) {
			$("#spanErrorEmail").fadeOut().fadeIn().css("color", "red");
			$("#spanEmailInfo").css("display", "none");
			isValid = false;
		} else {
			$("#spanErrorEmail").css("display", "none");
			$("#spanEmailInfo").css("display", "inline");
		}
		return isValid;
	}
	function isNameExist() {

		var name = jQuery.trim($("#Name").val());
		if (!nameRegex.test(name)) {
			$("#spanErrorName").fadeOut().fadeIn().css("color", "red");
			return false;
		}
		else {
			$("#spanErrorName").css("color", "#696969");
		}

		$.ajax({
			type: "POST",
			url: "/Account/IsNameExist",
			data: "name=" + name,
			success: function (msg) {
				if (msg == "True") {
					$("#spanErrorName").css("color", "red").html("* 此用户名已经存在,请您更换一个.");
				} else {
					$("#spanErrorName").css("color", "#696969").html("* 由\"a-z,A-Z,0-9,@@_.\"组成,共5 - 16位.");
				}
			}
		});
	}

	function showLoginZone() {
		$("#divLoginZone").fadeOut().fadeIn();
	}
	function showRegisterZone() {
		$("#divRegisterZone").fadeOut().fadeIn();
	}

</script>

@using (Html.BeginForm("Register", "Account"))
{
	<div class="accr_registerZone" id="divRegisterZone" style="@ViewBag.RegisterZone">
		<h2>
			创建您的帐号 <a href="javascript:showLoginZone();" style="font-size: 12px;">如果已经有帐号,点击这里</a>
		</h2>
		<div>
			<span class="accr_inforDescription"><span class="dot">·</span>请在下面输入您的帐户信息</span>
			<span class="accr_infoRequired">必填项(*)</span>
		</div>
		<hr class="line clear" />
		<div class="accr_register_input">
			<ul>
				<li>
					<div class="editor-label">
						@Html.LabelFor(model => model.Name, "用户名")
					</div>
					<div class="editor-field">
						@Html.TextBoxFor(model => model.Name, new { maxLength = 16, onblur = "isNameExist()" })
						<span id="spanErrorName">* 由"a-z,A-Z,0-9,@@_."组成,共5 - 16位. </span>
					</div>
				</li>
				<li>
					<div class="editor-label">
						@Html.LabelFor(model => model.Password, "密码")
					</div>
					<div class="editor-field">
						@Html.PasswordFor(model => model.Password, new { type = "password" })
						<span id="spanErrorPassword">* 密码至少6位. </span>
					</div>
				</li>
				<li>
					<div class="editor-label">
						@Html.Label("重复密码")
					</div>
					<div class="editor-field">
						<input type="password" name="txtPasswordConfirm" id="txtPasswordConfirm" />
						<span id="spanErrorPasswordRetype" style="display: none;">* 两次密码不一致.</span>
					</div>
				</li>
				<li>
					<div class="editor-label">
						@Html.LabelFor(model => model.Email, "邮箱")
					</div>
					<div class="editor-field">
						@Html.TextBoxFor(model => model.Email)
						<span id="spanEmailInfo">* 用于找回密码</span> <span id="spanErrorEmail" style="display: none;">
							* Email的格式不正确.</span>
					</div>
				</li>
			</ul>
			<p>
				<input type="submit" value="创建账户" onclick="return registerValidation()" />
			</p>
		</div>
	</div>
}
@using (Html.BeginForm("Login", "Account"))
{
	<div class="accr_loginZone" id="divLoginZone" style="@ViewBag.LoginZone">
		<div class="accr_loginInput">
			<h2>
				已经有了帐号 ? <a href="javascript:showRegisterZone();" style="font-size: 12px;">如果没有帐号,点击这里创建一个</a>
			</h2>
			<div>
				<span class="accr_inforDescription"><span class="dot">·</span> <span style="display:@ViewBag.ShowLoginInfo">
					请填写 用户名,密码 进行登录</span> <span style="display:@ViewBag.ShowErrorLogin;color:red;">用户名或密码错误,请重新登录</span>
				</span>
			</div>
			<hr class="line clear" />
			<ul>
				<li>
					<div class="editor-label">
						@Html.Label("loginName", "用户名")
					</div>
					<div class="editor-field">
						@Html.TextBox("Name", "", new { maxLength = "16", id = "loginName" })
						<span id="spanErrorLoginName" style="color: Red; display: none;">*</span>
					</div>
				</li>
				<li>
					<div class="editor-label">
						@Html.Label("loginPassword", "密码")
					</div>
					<div class="editor-field">
						@Html.Password("password", "", new { type = "password", id = "loginPassword" })
						<span id="spanErrorLoginPassword" style="color: Red; display: none;">*</span>
					</div>
				</li>
			</ul>
			<p>
				<input type="submit" value="登录" onclick="return loginValid();" />
			</p>
		</div>
	</div>
}
<div class="clear">
</div>
